<template>
  <div class="safetys">
       <Slideshow></Slideshow>
       <div class="content">
         <div class="header">
           <h3>安全宣传</h3>
           <span class="bules"></span>
           <span class="long"></span>
         </div>
         <div class="list">
          <ul>
            <li v-for="(iteam, index) in listIteam" :key="index" @mouseover="wordsColor(index)" @mouseout="wordsColor_1(index)">
              <div class="list-image">
                <img :src="iteam.cover" alt="安全宣传图片">
              </div>
              <div class="list-iteam">
                <h4>
                 <router-link :to="{name:'SecurityDetailsPage',params:{id:iteam.id}}" class="title">{{iteam.title}}</router-link> 
                </h4>
                <p v-html="iteam.excerpt"></p>
              </div>
              <span></span>
            </li>
          </ul>
         </div>
         <div class="block">
              <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="pagesize"
              :current-page="currentPage"
              @current-change="handleCurrentChange">
              </el-pagination>
         </div>
         </div>
        <Footer></Footer>
        <Fixeds></Fixeds>
        <Dialog></Dialog>
        <!-- <router-view></router-view>  -->
  </div>
</template>
<script>
import Slideshow from '../../common/Slideshow'
import Footer from "../../common/Footer"
import Fixeds from "../../common/Fixeds"
import Dialog from "../../common/Dialog"

export default {
  name:'Safety',
  components:{
    Slideshow,
    Footer,
    Fixeds,
    Dialog
  },
  data(){
    return{
    listIteam:[],
    currentPage:1,
    pagesize:10,
    total:1
    }
  },
  methods:{
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
      // document.documentElement.scrollTop = 0,  //点击分页页面返回顶部
        var node = this;
      window.$.get(this.apiUrl + '/articles/index',{
          per_page: 10,
          page:this.currentPage,
          category:2
      }, function (res) {
          node.total = res.meta.pagination.total;
          node.listIteam = res.data;
      })
    },
    wordsColor(index){
      let words = document.getElementsByClassName("title")[index];
      words.style.color = '#009ae9';
    },
    wordsColor_1(index){
       let words = document.getElementsByClassName("title")[index];
       words.style.color = '#000';
    }
  },
  created(){
      this.handleCurrentChange(1);
  }
}
</script>
<style scoped>
.safetys{
  width: 100%;
  height: auto;
}
.safetys .content{
  width: 1280px;
  height: auto;
  margin: 50px auto 100px;
}
.safetys .content .header{
  width: 1280px;
  height: 54px;
  position: relative;
}
.safetys .content .header h3{
  width: 100%;
  height: 38px;
  font-size: 36px;
  color: #110567;
  line-height: 38px;
}
.safetys .content .header .bules{
  display: inline-block;
  width: 151px;
  border-top: 3px solid #009ae9;
  margin-top: 7px;
}
.safetys .content .header .long{
  display: inline-block;
  width: 1200px;
  border-top: 1px solid #e8e8e8;
  position: absolute;
  bottom: 0;
}
.safetys .content .list{
  width: 1280px;
  height: auto;
  margin-top: 40px;
}
.safetys .content .list ul li{
  width: 1280px;
  height: 246px;
  margin-top: 39px;
  position: relative;
}
.safetys .content .list ul li:nth-child(1){
  margin-top: 0;
}
.safetys .content .list ul li .list-image{
  width: 326px;
  height: 189px;
  display: inline-block;
}
.safetys .content .list ul li .list-image img{
  width: 290px;
  height: 189px;
}
.safetys .content .list ul li .list-iteam{
  width: 880px;
  height: auto;
  margin-left: 40px;
  display: inline-block;
  vertical-align: top;
}
.safetys .content .list ul li .list-iteam h4{
  display: inline-block;
  
}
.safetys .content .list ul li .list-iteam h4 a{
  display: inline-block;
  width: 880px;
  height: 26px;
  font-size: 26px;
  color: #000;
  line-height: 26px;
  text-decoration: none;
}
.safetys .content .list ul li p{
  display: inline-block;
  width: 880px;
  height: auto;
  margin-top: 40px;
  color: #999;
  font-size: 18px;
  line-height: 30px;
}
.safetys .content .list ul li span{
  width: 1280px;
  border-bottom: 1px solid #e8e8e8;
  display: inline-block;
  margin-top: 40px;
}
.safetys .content .block .el-pagination{
  text-align: center;
}
</style>
<style>
.safetys .content .block .el-pagination.is-background .btn-next, .safetys .content .block .el-pagination.is-background .btn-prev,  .safetys .content .block .el-pagination.is-background .el-pager li{
  min-width: 50px;
} 
</style>
